<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备在线率</title>
    <script type="text/javascript" src="${request.contextPath}/statics/libs/jquery.min.js"></script>
    <script src="${request.contextPath}/statics/libs/html5shiv.min.js"></script>
    <script src="${request.contextPath}/statics/libs/respond.min.js"></script>
    <script src="${request.contextPath}/statics/plugins/echarts/echarts.min.js"></script>
</head>
<style type="text/css">
    .daoqi-table{
        width: 90%;
        height: 76%;
        border: 2px solid #6076ad;
        margin-left: 30px;
        border-collapse: collapse
    }
    .daoqi-tr1{
        background: #152f5b;
    }
    .daoqi{
        color: #fff;
        text-align: center;
        border: 1px solid #6076ad;
    }
    input::-webkit-input-placeholder {
        color:#fff;
        line-height: 27px;
    }
</style>
<body>

<div class="kaung" style="width: 1150px;height:770px;position: relative;margin:70px auto; padding: 20px;
        background: url('../../statics/image/Popup.png')no-repeat; background-size: 100% 100%">

<!--    <button id="guanbi1" class="guanbi" style="background: url('../../statics/image/list_close.png') no-repeat;border: none;-->
<!--            background-size: 100% 100%;position: absolute;right: 50px;top:50px;width: 16px;height: 16px"></button>-->

    <p class="title" style="color: #0efcff;font-size: 22px;text-align: center">设备在线率</p>

    <div class="top-left" style="position: absolute;left: 50px; width: 45%;height: 260px;background: #142747;border: 2px solid #384d79;
            box-shadow:  0px 0px 8px #3367c4 inset;">
        <p style="color: #0efcff;font-size: 16px;margin:10px 0 14px 20px">设备在线率: <span style="font-size: 18px;color: yellow" id="zaixianlv">-</span></p>
        <table class="daoqi-table">
            <tr class="daoqi-tr1">
                <td class="daoqi">设备</td>
                <td class="daoqi">在线</td>
                <td class="daoqi">离线</td>
            </tr>
            <tr class="daoqi-tr">
                <td class="daoqi">
                    <img src="../../statics/image/qixiangzhan.png" alt="" style="width: 8px" >
                    气象站</td>
                <td class="daoqi" id="qxzOnline">-</td>
                <td class="daoqi" id="qxzOffline">-</td></tr>
            <tr class="daoqi-tr">
                <td class="daoqi">
                    <img src="../../statics/image/nengjiandu.png" alt=""  style="width: 14px">
                    能见度仪</td>
                <td class="daoqi" id="njdOnline">-</td>
                <td class="daoqi" id="njdOffline">-</td></tr>
            </tr>
            <tr>
                <td class="daoqi">
                    <img src="../../statics/image/dimiantance.png" alt=""  style="width: 14px">
                    地面探测器</td>
                <td class="daoqi" id="dmtcqOnline">-</td>
                <td class="daoqi" id="dmtcqOffline">-</td></tr>
            </tr>
        </table>
    </div>
    <div class="top-right" style="position: absolute;right: 50px; width: 535.5px;height: 260px;background: #142747;border: 2px solid #384d79;
            box-shadow:  0px 0px 8px #3367c4 inset;" id="echarts">
<!--        <p style="color: #0efcff;font-size: 16px;margin:10px 0 14px 20px">物联网卡剩余流量提醒</p>-->
<!--        <table class="daoqi-table">-->
<!--            <tr class="daoqi-tr1">-->
<!--                <td class="daoqi">安装点</td>-->
<!--                <td class="daoqi">卡号</td>-->
<!--                <td class="daoqi">剩余流量</td>-->
<!--            </tr>-->
<!--            <tr class="daoqi-tr">-->
<!--                <td class="daoqi">K405+030 </td>-->
<!--                <td class="daoqi">1568497513</td>-->
<!--                <td class="daoqi" >230G</td></tr>-->
<!--            <tr class="daoqi-tr">-->
<!--                <td class="daoqi">K405+030 </td>-->
<!--                <td class="daoqi">1568497513</td>-->
<!--                <td class="daoqi">230G</td></tr>-->
<!--            </tr>-->
<!--            <tr>-->
<!--                <td class="daoqi">K405+030 </td>-->
<!--                <td class="daoqi">1568497513</td>-->
<!--                <td class="daoqi">230G</td></tr>-->
<!--            </tr>-->
<!--        </table>-->
    </div>
    <div class="bot" style="position: absolute;bottom:40px;left:50px;width: 91.4%;height: 396px;background: #142747;
            box-shadow:  0px 0px 8px #3367c4 inset;border: 2px solid #384d79;">
        <iframe src="../../modules/baseinfo/lhpequipmentshow.html" style="width: 100%;height: 100%;"></iframe>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function(){
        equipmentStatus();
    })
    function equipmentStatus(){
        $.ajax({
            type : "post",
            url : "../../homepage/checkEquipmengStatus",
            data : {},
            dataType : "json",
            success : function(r) {
                var data=r.infoMap;
                $("#qxzOnline").html(data.qxzOnline);
                $("#qxzOffline").html(data.qxzOffline);
                $("#njdOnline").html(data.njdOnline);
                $("#njdOffline").html(data.njdOffline);
                $("#dmtcqOnline").html(data.dmtcqOnline);
                $("#dmtcqOffline").html(data.dmtcqOffline);
                var equipmentOn = Number(data.qxzOnline)+Number(data.njdOnline)+Number(data.dmtcqOnline);
                var equipmentOff = Number(data.qxzOffline)+Number(data.njdOffline)+Number(data.dmtcqOffline);
                var zaixianlv = equipmentOn/(equipmentOn+equipmentOff);
                zaixianlv = zaixianlv.toFixed(2);
                $("#zaixianlv").html(zaixianlv);

                //echarts
                var myChart = echarts.init(document.getElementById('echarts'));
                var value=[{value:equipmentOn,name:"在线设备"},{value:equipmentOff,name:"离线设备"}];
                var option = {
                    title: {
                        text: '设备状态统计',
                        left: 'center',
                        textStyle:{
                            color:"#fff"
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 10,
                        top: 20,
                        bottom: 20,
                        data: ["在线设备","离线设备"],
                        textStyle:{
                            color:"#fff"
                        }
                    },
                    series: [
                        {
                            name: '设备状态',
                            type: 'pie',
                            radius: '65%',
                            center: ['40%', '50%'],
                            color:["green","red"],
                            data: value,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            }
        });
    }
</script>
</html>
<script type="text/javascript">
    $(function(){
        $('#guanbi1').click(function(){
            $('.bb1').hide()
        })
    })
</script>